<template>
    <div ref="container" class="stars-container absolute inset-0 pointer-events-none"></div>
</template>

<script setup>
const container = ref(null);

onMounted(() => {
    const width = container.value.clientWidth;
    const height = container.value.clientHeight;
    for (let i = 0; i < 50; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.top = `${Math.random() * (height - 30)}px`;
        star.style.left = `${Math.random() * (width - 30)}px`;
        star.style.animationDelay = `${Math.random() * 2}s`;
        container.value.appendChild(star);
    }
});
</script>

<style>
.stars-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 999;
}

.star {
    position: absolute !important;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    background: white;
    opacity: 0.9;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #fff8;
    animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(5deg);
    }
}
</style>